<template>
  <div class="park-num">
    <Echarts :options="options" height="100%" width="100%"> </Echarts>
  </div>
</template>

<script>
import Echarts from "./echarts.vue"
import cockpitApi from '@/api/investment/cockpit'

let colorList = ["#C6BC5C", "#0DAEE3", "#5A70BC", "#67D470", "#489BFF"];

export default {
  name: "parkNum",
  components: {
    Echarts,
  },
  props: ['times'],
  watch: {
    times: {
      handler(newVal) {
        this.paramsObj.searchBeginTime = newVal && newVal[0]
        this.paramsObj.searchEndTime = newVal && newVal[1]

        this.initOptions()
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      paramsObj: {
        searchBeginTime: "",
        searchEndTime: ""
      },
      options: {
        backgroundColor: "transparent",
        grid: {
          containLabel: true,
          left: 0,
          right: 0,
          bottom: 0,
          top: 10,
        },
        xAxis: {
          axisLabel: {
            color: "#7591B2",
            fontSize: 12,
            interval: 0,
          },
          axisTick: {
            lineStyle: {
              color: "#384267",
            },
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#2B446D",
              width: 1,
            },
            show: true,
          },
          data: [],
          type: "category",
        },
        yAxis: {
          axisLabel: {
            color: "#B5C5D4",
            fontSize: 12,
            textStyle: {
              color: "#7E90AB"
            }
          },
          splitArea: {
            show: false
          },
          axisTick: {
            lineStyle: {
              color: "#384267",
              width: 1,
            },
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#384267",
              type: "dashed",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#92A0B6",
              width: 1,
              type: "dashed",
            },
            show: false,
          },
          name: "",
        },
        series: [
          {
            data: [],
            name: '楼宇数',
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 16,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#489EDF",
                  },
                  {
                    offset: 1,
                    color: "#2578C1",
                  },
                ],
              },
            },
            label: {
              show: false,
              position: "top",
              distance: 10,
              color: "#fff",
            },
          },
          // {
          //   data: [],
          //   name: '楼宇数',
          //   type: "bar",
          //   barMaxWidth: "auto",
          //   barWidth: 16,
          //   itemStyle: {
          //     color: {
          //       x: 0,
          //       y: 0,
          //       x2: 0,
          //       y2: 1,
          //       type: "linear",
          //       global: false,
          //       colorStops: [
          //         {
          //           offset: 0,
          //           color: "#C9CA5E",
          //         },
          //         {
          //           offset: 1,
          //           color: "#C9CA5E",
          //         },
          //       ],
          //     },
          //   },
          //   label: {
          //     show: false,
          //     position: "top",
          //     distance: 10,
          //     color: "#fff",
          //   },
          // },

          // {
          //   data: [],
          //   name: '楼宇数',
          //   type: "line",
          //   barMaxWidth: "auto",
          //   barWidth: 16,
          //   barGap: "-100%",
          //   zlevel: -1,
          //   itemStyle: {
          //     color: {
          //       x: 0,
          //       y: 0,
          //       x2: 0,
          //       y2: 1,
          //       type: "linear",
          //       global: false,
          //       colorStops: [
          //         {
          //           offset: 0,
          //           color: "#26394B",
          //         },
          //         {
          //           offset: 1,
          //           color: "#26394B",
          //         },
          //       ],
          //     },
          //   },
          // },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            // label: {
            //     show: true
            // }
          }
        },
      },
    }
  },
  methods: {
    async initOptions() {
      const {data} = await cockpitApi.getBuildingBarChart(this.paramsObj)     
      
      let xAxisData = data.map(item => item.name)
      let seriesLine = data.map(item => item.buildingCount)

      this.$set(this.options.xAxis, 'data', xAxisData)
      this.$set(this.options.series[0], 'data', seriesLine)

      // 面积数
      // let seriesBar = data.map(item => item.areaCount)

    }
  }
};
</script>

<style lang="scss" scoped>
.park-num {
  width: 100%;
  height: 13.021vw;
  padding-top: 0.521vw;
}
</style>
